This is the header
Main page content here, add more if you want to see the footer push down.
html, body { box-sizing: border-box; height: 100%; padding: 0; margin: 0; } .wrapper { box-sizing: border-box; min-height: 100%; display: flex; flex-direction: column; } .page-header, .page-footer { flex-grow: 0; flex-shrink: 0; } .page-body { flex-grow: 1; }
<div class="wrapper"> <header class="page-header">This is the header</header> <main class="page-body"> <p>Main page content here, add more if you want to see the footer push down.</p> </main> <footer class="page-footer">Sticky footer</footer> </div>